<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 24px; font-weight: bold">{{ inspectionInfo.spotcheckName }}</span>
      </div>
      <div>
        <el-row>
          <el-form label-width="120px">
            <el-col :span="12" style="line-height: 30px">
              <p><el-form-item label="创建人：">{{ inspectionInfo.insertPerson }} </el-form-item></p>
              <p>
                <el-form-item label="创建时间：">{{ inspectionInfo.insertTime }}
                </el-form-item>
              </p>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-button type="primary" plain @click="closeForm">关闭</el-button>
              <el-button type="primary" plain>导出</el-button>
              <el-button type="primary" plain>打印</el-button>
            </el-col>
          </el-form>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-tabs v-model="tab" @tab-click="handleClick">
            <el-tab-pane label="计划信息" name="计划信息"></el-tab-pane>
            <el-tab-pane label="点检明细" name="点检明细"></el-tab-pane>
            <el-tab-pane label="审核记录" name="审核记录"></el-tab-pane>
            <el-tab-pane label="操作记录" name="操作记录"></el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-card>
    <!-- 基础信息 -->
    <span v-if="tab == '计划信息'">
      <el-card class="box-card" style="line-height: 40px">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>
        <div>
          <el-form label-width="250px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划编号:">{{ inspectionInfo.code }} </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划名称:">{{ inspectionInfo.spotcheckName }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划开始时间:">{{ inspectionInfo.spotcheckOntime }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划结束时间:">{{ inspectionInfo.spotcheckOntime }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划类型:">{{ inspectionInfo.spotcheckDaytypeId }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行周期规则:">{{ inspectionInfo.deviceExecution.executionName }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="执行规则描述:">{{ inspectionInfo.deviceExecution.executionDescribe }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="备注:">{{ inspectionInfo.spotcheckNotes }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 点检人员 -->
      <el-card class="box-card" style="margin-top: 10px">
        <div slot="header" class="clearfix">
          <span>点检人员</span>
        </div>
        <div>
          <el-form label-width="250px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="点检班组:">{{ inspectionInfo.spotcheckClassId }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="点检人:">{{ inspectionInfo.spotcheckPerson }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 附件 -->
      <el-card class="box-card" style="margin-top: 10px; margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>附件</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">批量下载</el-button>
          <el-table :data="files" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="serial" label="序号" align="center">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="filename" label="文件名" align="center"></el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
            <el-table-column prop="uploader" label="上传者" align="center"></el-table-column>
            <el-table-column prop="size" label="文档大小" align="center"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <span v-if="tab == '点检明细'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>点检明细</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="inspectionDetails" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="index" label="序号" width="50">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="code" label="设备编号" align="center"></el-table-column>
            <el-table-column prop="equipment.name" label="设备名称" align="center"></el-table-column>
            <el-table-column prop="equipment.specifications" label="规格型号" align="center"></el-table-column>
            <el-table-column prop="equipment.deviceType" label="设备类型" align="center"></el-table-column>
            <el-table-column prop="equipment.useDepartments" label="使用部门" align="center"></el-table-column>
            <el-table-column prop="equipment.storageLocation" label="存放位置" align="center"></el-table-column>
            <el-table-column prop="whether" label="是否拍照" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.whether == 1">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column prop="checkIn" label="扫码登记" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.checkIn == 1">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column label="点检项目" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="selectPmts(scope.row.project)">查看点检项目</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <span v-if="tab == '审核记录'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>审核记录</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="auditRecords" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="node" label="操作节点"></el-table-column>
            <el-table-column prop="operator" label="操作人"></el-table-column>
            <el-table-column prop="action" label="操作"></el-table-column>
            <el-table-column prop="time" label="操作时间"></el-table-column>
            <el-table-column prop="comments" label="审批内容"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <span v-if="tab == '操作记录'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>操作记录</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="auditRecords" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="node" label="操作节点"></el-table-column>
            <el-table-column prop="operator" label="操作人"></el-table-column>
            <el-table-column prop="action" label="操作"></el-table-column>
            <el-table-column prop="time" label="操作时间"></el-table-column>
            <el-table-column prop="comments" label="操作内容"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>

    <!-- 点检项目预览 -->
    <el-dialog v-model="preview" :visible.sync="preview" title="点检项目预览" style="width: 150%; margin-left: -25%">
      <el-divider></el-divider>
      <el-form @submit.native.prevent>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-input placeholder="请输入点检项目名称/编号" style="width: 300px" v-model="condition"  @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="pmts">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="序号" fixed> 

          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="点检项目名称" prop="pmts.pmtsName"> </el-table-column>
        <el-table-column label="点检项目编号" prop="pmts.code"> </el-table-column>
        <el-table-column label="点检部位" prop="pmts.pmtsPartId"> </el-table-column>
        <el-table-column label="点检方法" prop="pmts.pmtsMethod"> </el-table-column>
        <el-table-column label="点检内容" prop="pmts.pmtsContent"> </el-table-column>
        <el-table-column label="判定标准" prop="pmts.pmtsCalibration"> </el-table-column>
        <el-table-column label="点检结果" prop="isJudge"> </el-table-column>
        <el-table-column label="是否正常" prop="state">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">正常</span>
            <span v-else>异常</span>
          </template>
           </el-table-column>
        <el-table-column label="备注"> </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <div style="text-align: right">
        <el-button @click="preview = false">取消</el-button>
        <el-button type="primary" @click="preview = false">确认</el-button>
      </div>
    </el-dialog>

    <el-card class="close-card">
      <el-button>关闭</el-button>
    </el-card>
  </div>
</template>

<script>
import { listDe, listIns, listDoc } from "@/api/inspection/inspectionPlan";
import { selectPmts } from "@/api/eastjet-maintenance/spotcheck/spotcheckPlan";
export default {
  data() {
    return {
      preview: false,
      tab: "计划信息",
      dialogVisible: false,
      value: "",
      inspectionDetails: [],
      inspectionInfo: {},
      pmts:[],
      files: [],
      condition: "",
    };
  }, mounted() {
    this.inspectionInfo = this.$route.query;
    console.log(this.inspectionInfo);
    this.document();
    this.select();
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    }, select() {
      listDe(this.inspectionInfo.code).then((res) => {
        console.log(res);
        this.inspectionDetails = res.data;
      });
    },
    closeForm() {
      this.$router.go(-1);
    },selectPmts(val){
      this.preview = true;
      selectPmts(this.inspectionInfo.code,val).then((res) => {
        console.log(res);
        this.pmts = res.data;
      })
    },
    document() {
      listDoc(this.inspectionInfo.code).then((res) => {
        this.files = res.data;
        console.log("document", this.files);
      });
    },search(){
      this.selectPmts(this.condition);
    }
  },
};
</script>

<style scoped>
.box-card {
  margin: 20px 20px 40px 40px;
  width: 1250px;
  /* 设置固定宽度 */
  max-width: 100%;
  /* 防止过大 */
}

.close-card {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  /* margin-top: 20%; */
  text-align: center;
  z-index: 1;
}

.clearfix:after {
  font-weight: bold;
}
</style>